<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-on="http://www.w3.org/1999/xhtml"
>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="../../../../static/favicon.ico" th:href="@{/favicon.ico}">

    <link rel="stylesheet" type="text/css" href="../../../../static/bootstrap/css/bootstrap.min.css"
          th:href="@{/bootstrap/css/bootstrap.min.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/plugins/iCheck/custom.css"
          th:href="@{/plugins/iCheck/custom.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/plugins/layui/css/layui.css"
          th:href="@{/plugins/layui/css/layui.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/font-awesome.css"
          th:href="@{/web/admin/css/font-awesome.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/animate.css"
          th:href="@{/web/admin/css/animate.css}"/>
    <link rel="stylesheet" type="text/css" href="../../../../static/web/admin/css/style.css"
          th:href="@{/web/admin/css/style.css}"/>

    <style type="text/css">
        table td,
        table th {
            text-align: center;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content" id="body">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>管理员权限组
                        <small>管理员权限组管理</small>
                    </h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-2">
                            <div class="panel panel-primary">
                                <div class="panel-heading">权限组</div>
                                <div class="panel-body list-group">
                                    <div class="list-group">
                                        <a href="javascript:void(0);" class="list-group-item" v-for="(item, index) in list" v-on:click="update(item,$event)">{{item.name}}</a>
                                    </div>
                                    <button type="button" class="btn btn-block btn-outline btn-primary" v-on:click="add">添加权限组</button>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-10">
                            <div class="panel panel-primary">
                                <div class="panel-heading">详细权限信息</div>
                                <div class="panel-body">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <span style="font-size: 20pt;font-weight: bold;">{{info.name}}</span>
                                            <span class="badge badge-success" v-if="info.id > 0">id:{{info.id}}</span>
                                            <button type="button" class="btn btn-danger" v-if="info.id > 0" v-on:click="del"><i
                                                    class="glyphicon glyphicon-trash"></i> &nbsp;删除
                                            </button>
                                        </div>
                                    </div>
                                    <form method="get" class="form-horizontal">
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label">权限组名称</label>
                                            <div class="col-sm-3">
                                                <input v-model="info.name" type="text" class="form-control"
                                                       aria-required="true" placeholder="权限组名称">
                                            </div>
                                        </div>
                                        <div th:each="item,status : ${roles}">
                                            <div class="hr-line-dashed"></div>
                                            <div class="form-group">
                                                <label class="col-sm-1 control-label" th:text="${item.key}">标题</label>
                                                <div class="col-sm-10">
                                                    <button type="button" class="btn btn-w-m btn-white" th:each="role,rStatus : ${item.value}" th:value="${role.id}" th:disabled="${!session.admin.hasAnyRole('r_root',role.name)}">
                                                        <i class="fa fa-square-o"></i> &nbsp;<span th:text="${role.title}">权限名称</span>
                                                    </button>
                                                    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" th:if="${roleDes[item.key]}" data-original-title="" th:attr="data-original-title=${roleDes[item.key]}">
                                                        <i class="fa fa-info-circle"></i>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                        <!--<div class="hr-line-dashed"></div>
                                        <div class="form-group">
                                            <label class="col-sm-1 control-label">管理员</label>
                                            <div class="col-sm-10">
                                                <button type="button" class="btn btn-w-m btn-white" value="admin_list">
                                                    <i class="fa fa-square-o"></i> &nbsp;管理员列表
                                                </button>
                                                <button type="button" class="btn btn-w-m btn-white" value="admin_add">
                                                    <i class="fa fa-square-o"></i> &nbsp;添加管理员
                                                </button>
                                                <button type="button" class="btn btn-w-m btn-white" value="admin_update">
                                                    <i class="fa fa-square-o"></i> &nbsp;修改管理员
                                                </button>
                                                <button type="button" class="btn btn-w-m btn-white" value="admin_del">
                                                    <i class="fa fa-square-o"></i> &nbsp;删除管理员
                                                </button>
                                                <button type="button" class="btn btn-w-m btn-white" value="admin_group">
                                                    <i class="fa fa-square-o"></i> &nbsp;修改权限
                                                </button>
                                                <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="" data-original-title="修改权限：可修改其他管理员权限。建议给超级管理员分配此权限，无此权限者无法修改其他管理员权限">
                                                    <i class="fa fa-info-circle"></i>
                                                </button>
                                            </div>
                                        </div>-->
                                        <div class="hr-line-dashed"></div>
                                        <div class="form-group">
                                            <div class="col-sm-12">
                                                <button type="button" class="btn btn-w-m btn-primary" v-on:click="save">保存权限信息</button>
                                                <div class="btn-group">
                                                    <button class="btn btn-primary" type="button" id="btnSA1"><i class="fa fa-check-square-o"></i> 全选</button>
                                                    <button class="btn btn-primary" type="button" id="btnSA2"><i class="fa fa-square-o"></i> 全不选</button>
                                                    <button class="btn btn-primary" type="button" id="btnSA3">反选</button>
                                                    <!--<button class="btn btn-primary" type="button" id="btnGet">获取到选中</button>-->
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>
<script src="../../../../static/plugins/jquery.min.js" th:src="@{/plugins/jquery.min.js}" type="text/javascript"
        charset="utf-8"></script>
<script src="../../../../static/bootstrap/js/bootstrap.min.js" th:src="@{/bootstrap/js/bootstrap.min.js}"
        type="text/javascript" charset="utf-8"></script>
<script src="../../../../static/plugins/vuejs/vue.min.js" th:src="@{/plugins/vuejs/vue.min.js}" type="text/javascript"
        charset="utf-8"></script>
<script src="../../../../static/plugins/layui/layui.js" th:src="@{/plugins/layui/layui.js}" type="text/javascript"
        charset="utf-8"></script>
<script src="../../../../static/web/admin/js/content.js" th:src="@{/web/admin/js/content.js}" type="text/javascript"
        charset="utf-8"></script>
<script>

    layui.use(['layer'], function () {
        function getMsgForBean(data, br) {
            var msg = [data.msg];
            if (typeof br !== "string") {
                br = "<br>";
            }
            if (data.msgs !== undefined && data.msgs.length > 0) {
                for (var i = 0; i < data.msgs.length; i++) {
                    msg.push(data.msgs[i]);
                }
            }
            return msg.join(br);
        }

        var app = new Vue({
            el: '#body',
            data: {
                list:[],
                info:{
                    id:0,
                    name:"权限组名称"
                }
            },
            methods: {
                add:function () {
                    var item = {
                        id:0,
                        name:"新的权限组"
                    };
                    this.info = item;
                    $.each($(".list-group-item").parent().children(),function (i, n) {
                        $(n).removeClass("active");
                    });
                    btnUnCheckedAll();
                },
                update:function (item,evn) {

                    $.each($(evn.target).parent().children(),function (i, n) {
                        $(n).removeClass("active");
                    });
                    $(evn.target).addClass("active");

                    var vue = this;
                    vue.info = item;
                    $.each($(".btn"),function (i,n) {
                        if($(n).attr("class").indexOf("btn-white")>-1){
                            if (vue.hasID(item,$(n).val())){
                                btnChecked(n,true);
                            }
                        }else if($(n).attr("class").indexOf("btn-success")>-1){
                            if (!vue.hasID(item,$(n).val())){
                                btnChecked(n,false);
                            }
                        }
                    });
                },
                del:function () {
                    var vue = this;
                    var data = {id: vue.info.id};
                    layui.layer.confirm('您要删除【' + vue.info.name + '】吗？', {
                        btn: ['确定删除', '不，留着生孩子'] //按钮
                    }, function () {
                        layui.layer.prompt({
                            formType: 1,
                            value: "",
                            title: '请验证当前用户密码'
                        }, function (value, index, elem) {
                            layui.layer.closeAll();
                            data.password = value;
                            data._method = "DELETE";
                            $.ajax({
                                type: "post",
                                data: data,
                                url: "",
                                async: true,
                                dataType: "json",
                                success: function (data) {
                                    if (data.code === 0) {
                                        vue.loadPage();
                                    } else {
                                        layui.layer.msg(getMsgForBean(data), {time: 20000, btn: ['明白了']}, function () {
                                            vue.loadPage();
                                        });
                                    }
                                },
                                error: function () {
                                    layui.layer.msg("加载错误");
                                }
                            });
                        });
                    });
                },
                save:function () {
                    var vue = this;
                    var data = [];
                    data.push("id="+vue.info.id);
                    data.push("name="+vue.info.name);
                    $.each($(".btn-success"),function (i,n) {
                        data.push("roles["+i+"].id="+$(n).val()*1);
                    });
                    /*console.log(JSON.stringify(vue.info));
                    console.log(data.join("&"));*/
                    $.ajax({
                        type: "POST",
                        data: data.join("&"),
                        url: "",
                        async: true,
                        dataType: "json",
                        success: function (data) {
                            if (data.code === 0) {
                                layui.layer.msg(getMsgForBean(data));
                                vue.loadPage();
                            } else {
                                layui.layer.msg(getMsgForBean(data), {time: 20000, btn: ['明白了']});
                            }
                        },
                        error: function () {
                            vue.list = [];
                            layui.layer.msg("加载错误", {time: 5000, btn: ['明白了']});
                        }
                    });
                },
                hasID:function (item,id) {
                    for(var i=0;i<item.roles.length;i++){
                        if (item.roles[i].id === id*1){
                            return true;
                        }
                    }
                    return false;
                },
                loadPage: function () {
                    var vue = this;
                    $.ajax({
                        type: "get",
                        data: "",
                        url: "",
                        async: true,
                        dataType: "json",
                        success: function (data) {
                            if (data.code === 0) {
                                layui.layer.msg(getMsgForBean(data));
                                vue.list = data.list;
                                vue.add();
                            } else {
                                vue.list = [];
                                layui.layer.msg(getMsgForBean(data), {time: 20000, btn: ['明白了']});
                            }
                        },
                        error: function () {
                            vue.list = [];
                            layui.layer.msg("加载错误", {time: 5000, btn: ['明白了']});
                        }
                    });
                }
            },
            mounted: function () {
                this.loadPage();
                $("body").tooltip({
                    selector: "[data-toggle=tooltip]",
                    container: "body"
                });
                $(".list-group-item").click(function () {
                    $.each($(this).parent().children(),function (i, n) {
                        $(n).removeClass("active");
                    });
                    $(this).addClass("active");
                });
                $(".btn").click(function () {
                    // 按钮被点击的时候触发
                    btnCheck(this);
                });
                $("#btnSA1").click(function () {
                    btnCheckedAll();
                });
                $("#btnSA2").click(function () {
                    btnUnCheckedAll();
                });
                $("#btnSA3").click(function () {
                    // 反选。顾名思义
                    $.each($(".btn"),function (i,n) {
                        if($(n).attr("class").indexOf("btn-white")>-1){
                            btnChecked(n,true);
                        }else if($(n).attr("class").indexOf("btn-success")>-1){
                            btnChecked(n,false);
                        }
                    });
                });
                /*$("#btnGet").click(function () {
                    // 获得全中的内容
                    var check = [];
                    $.each($(".btn-success"),function (i,n) {
                        check.push($(n).val());
                    });
                    alert(check.join("、"));
                });*/
            }
        });
        function btnCheckedAll() {
            // 全选。只要是没有被选中的就选中它
            $.each($(".btn"),function (i,n) {
                if($(n).attr("class").indexOf("btn-white")>-1){
                    btnChecked(n,true);
                }
            });
        }
        function btnUnCheckedAll() {
            // 全不选。只要是选中的就取消选中
            $.each($(".btn"),function (i,n) {
                if($(n).attr("class").indexOf("btn-success")>-1){
                    btnChecked(n,false);
                }
            });
        }
        function btnCheck(elm) {
            // 按钮被点击的时候触发,然后判断是不是一个选项按钮
            if($(elm).attr("class").indexOf("btn-white")>-1){
                btnChecked(elm,true);
            }else if($(elm).attr("class").indexOf("btn-success")>-1){
                btnChecked(elm,false);
            }
        }
        function btnChecked(elm,check) {
            if (check) {
                $(elm).find(".fa").removeClass("fa-square-o").addClass("fa-check-square-o");
                $(elm).removeClass("btn-white").addClass("btn-success");
            }else{
                $(elm).find(".fa").removeClass("fa-check-square-o").addClass("fa-square-o");
                $(elm).removeClass("btn-success").addClass("btn-white");
            }
        }
    });
</script>
</body>

</html>